<template>
  <div class="taskManage">
    <div class="left-menu">
      <div class="userInfo">
        <p class="name">元气草后台</p>
      </div>
      <menuList @openMenu="openMenu"/>
      <div class="logo">
        <!-- <img src="./assets/images/logo.png" alt=""> -->
      </div>
    </div>
    <div class="header">
      <el-tabs v-model="routeTabsValue" type="card" :editable="routeMenuList.length>1" @edit="routeTabsEdit" @tab-click="checkTabs">
        <el-tab-pane
          :key="item.routeName"
          v-for="item in routeMenuList"
          :label="item.title"
          :name="item.routeName"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="main-container">
      <router-view />
    </div>
  </div>
</template>
<script>
import menuList from "./menu";
import { mapState } from 'vuex'
export default {
  name: "home",
  data() {
    return {
      active: "",
    };
  },
  computed: {
    ...mapState(['routeMenuList', 'routeTabsValue'])
  },
  created() {
    try {
      let sessionRoute = sessionStorage.getItem('routeMenuList') ? JSON.parse(sessionStorage.getItem('routeMenuList')) : []
      let routeTabsValue = sessionStorage.getItem('routeTabsValue') || ''
      if (sessionRoute.length < 1) {
        this.routeTabsEdit({
          routeName: this.$route.name,
          active: true,
          title: this.$route.meta.title
        }, 'add')
      } else {
        this.$store.commit('setRouteMenuList', sessionRoute)
        this.setRote(routeTabsValue)
      }
      this.active = this.$route.name
    } catch (error) {
      console.log(error)
    }
  },
  mounted() {},
  components: {
    menuList,
  },
  methods: {
    isUrl(url) {
      var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/
      return reg.test(url)
    },
    openMenu(data) {
      this.active = data.name
      this.routeTabsEdit({
        routeName: data.name,
        active: true,
        title: data.title
      }, 'add')
      this.$router.push({
        name: data.name
      })
    },
    checkTabs(item) {
      this.setRote(item.name)
    },
    setRote(routeName) {
      let routeList = JSON.parse(sessionStorage.getItem('routeMenuList')) || []
      routeList.forEach((route) => {
        route.active = route.routeName === routeName
      })
      this.$store.commit('setRouteTabsValue', routeName)
      this.$store.commit('setRouteMenuList', [ ...routeList ])
      if (this.isUrl(routeName)) {
      } else {
        this.$router.push({
          name: routeName
        })
      }
    },
    routeTabsEdit(route, action) {
      let routeList = []
      if (action === 'add') {
        routeList = JSON.parse(sessionStorage.getItem('routeMenuList')) || []
        for (let i = 0; i < routeList.length; i++) {
          if (routeList[i].routeName === route.routeName) {
            // this.$store.commit('setRouteTabsValue', routeList[i].routeName)
            this.setRote(routeList[i].routeName)
            return
          }
        }
        this.$store.commit('setRouteMenuList', [ ...routeList, route ])
        this.$store.commit('setRouteTabsValue', route.routeName)
      }
      if (action === 'remove') {
        let tabs = JSON.parse(sessionStorage.getItem('routeMenuList')) || []
        let activeName = this.routeTabsValue + ''
        if (activeName === route) {
          tabs.forEach((tab, index) => {
            if (tab.routeName === route) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.routeName
              }
            }
          })
        }
        this.$store.commit('setRouteTabsValue', activeName)
        routeList = tabs.filter(tab => tab.routeName !== route)
        routeList.forEach((route) => {
          route.active = route.routeName === activeName
        })
        this.$router.push({
          name: activeName
        })
        this.$store.commit('setRouteMenuList', [ ...routeList ])
      }
    },
  },
  watch: {
    $route(to, from) {
      this.active = this.$route.name;
    },
  },
};
</script>
<style lang="scss" scoped>
body {
  background-color: #f0f1f4;
}
.taskManage {
  min-width: 1144px;
  background-color: #f1f0f4;
  padding: 60px 0 0 200px;
  height: 100%;
  .left-menu {
    // 左侧菜单
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    background-color: #1c1c1e;
    overflow: hidden;
    color: #ffffff;
    overflow-y: scroll;
    font-size: 13px;
    z-index: 100;
    .logo {
      text-align: center;
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      img {
        width: 90px;
        height: 42px;
      }
    }
    .userInfo {
      // 用户信息
      // padding-top: 30px;
      text-align: center;
      margin-bottom: rem(30px);
      padding:20px 0;
      font-size: 24px;
      background-color:  #0856b3;
      .userImg {
        border: 2px solid #ffffff;
        margin-bottom: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50px;
      }
    }
  }
  .header {
    // 头部
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    height: 60px;
    background-color: #fff;
    box-shadow: rgba(51, 51, 51, 0.08) 0px 2px 6px;
    z-index: 99;
    /DEEP/ .el-tabs{
      margin-left: 10px;
      margin-top: 10px;
      &.el-tabs--card>.el-tabs__header{
        .el-tabs__nav{
          border: 0px;
        }
        border-bottom: 0px;
        .el-tabs__item {
          border:1px solid #E4E7ED!important;
          margin-right: 10px;
        }
      }
      .el-tabs__new-tab{
        display: none;
      }
    }
  }
  .main-container {
    padding: 20px;
    min-width: 1200px;
  }
}
</style>
